<template>
  <view class="login-container">
    <!-- 头部区域 -->
    <view class="login-header">
      <image src="../../static/avatar.jpg" class="avatar"></image>
      <text class="nickName">落落</text>
    </view>
    <view class="login-body">
      <!-- 用户收藏相关 -->
      <view class="panel">
        <view class="panel-body">
          <view class="panel-item" v-for="(item,index) in collect" :key="index">
            <text>{{item.count}}</text>
            <text>{{item.title}}</text>
          </view>
        </view>
      </view>
      <!-- 订单功能相关 -->
      <view class="panel">
        <view class="panel-title">我的订单</view>
        <view class="panel-body">
          <view class="panel-item" v-for="(item,index) in order" :key="index">
            <image :src='item.icon' class="order-icon"></image>
            <text>{{item.title}}</text>
          </view>
        </view>
      </view>
      <!-- 相关功能区域 -->
      <view class="panel">
        <view class="panel-title item" v-for="(item,index) in ['收货地址','联系客服','退出登录']" :key="index"
          @click="logout(index)">
          <text>{{item}}</text>
          <uni-icons type="forward"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  import {
    removeUserToken,
    removeUserDetailInfo,
    removeUserInfo
  } from '@/common/storage.js'
  export default {
    name: "user-info",
    data() {
      return {
        collect: [{
            count: 8,
            title: '收藏的店铺'
          },
          {
            count: 14,
            title: '收藏的商品'
          },
          {
            count: 18,
            title: '关注的商品'
          },
          {
            count: 84,
            title: '足迹'
          }
        ],
        order: [{
            icon: '../../static/my-icons/icon1.png',
            title: '待付款'
          },
          {
            icon: '../../static/my-icons/icon2.png',
            title: '待收货'
          },
          {
            icon: '../../static/my-icons/icon3.png',
            title: '退款/退货'
          },
          {
            icon: '../../static/my-icons/icon4.png',
            title: '全部订单'
          }
        ]
      };
    },
    methods: {
      ...mapMutations('userInfo', ['updateUserAddr', 'updateToken', 'updateUserInfo']),
      async logout(index) {
        if (index === 2) {
          const [err,succ] = await uni.showModal({
            title: '提示',
            content: '请确认是否要退出登录？',
            
          })
          // console.log(data);
          if(succ?.confirm) {
            removeUserToken()
            removeUserDetailInfo()
            removeUserInfo()
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .login-container {
    height: 100%;
    background-color: #f4f4f4;

    .login-header {
      height: 200px;
      background-color: #C00000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        border: 2px solid #fff;
        box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, .5);
      }

      .nickName {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        margin-top: 10px;
      }
    }

    .login-body {
      padding: 0 10px;
      transform: translateY(-10px);

      .panel {
        overflow: hidden;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #fff;

        .panel-body {
          display: flex;
          align-items: center;

          .panel-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            font-size: 14px;
            padding: 10px 0;

            .order-icon {
              width: 30px;
              height: 30px;
            }
          }
        }

        .panel-title {
          padding: 0 10px;
          line-height: 40px;
          border-bottom: 1px solid #efefef;

          &.item {
            display: flex;
            justify-content: space-between;
            border-bottom: none;
          }
        }
      }

      .item {
        line-height: 40px;
      }
    }
  }
</style>
